<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>watchprop</title>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>
  <!-- 我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。 -->
  <div id="computed_props">
    千米 : <input type="text" v-model="kilometers">
    米 : <input type="text" v-model="meters">
  </div>
  <p id="info"></p>

  <script>
    var vm = new Vue({
      el: "#computed_props",
      data: {
        kilometers: 0,
        meters: 0
      },
      methods: {

      },
      computed: {

      },
      watch: {
        kilometers: function (val) {
          this.kilometers = val;
          this.meters = this.kilometers * 1000;
        },
        meters: function (val) {
          this.meters = val;
          this.kilometers = val / 1000;
        }
      }
    });
    // $watch是一个实例方法
    vm.$watch('kilometers', function (newVal, oldVal) {
      // 这个回调将在vm.kilometers改变后调用
      document.getElementById("info").innerHTML = "修改前值为: " + oldVal + " , 修改后的值为: " + newVal;
    })
  </script>

</body>

</html>